<template>
  <!-- 系统设置模块-日志查看设置页面 -->
  <div class="fillcontain">
    <!-- 标题 -->
    <div class="fastQuery">
      <el-row>
        <el-col :span="8" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="labelName">业务模块</label>
          </el-col>
          <el-col :span="14">
            <el-input clearable v-model="busiMode" placeholder=""></el-input>
          </el-col>
        </el-col>
        <el-col :span="8" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="labelName">业务编号</label>
          </el-col>
          <el-col :span="14">
            <el-input clearable v-model="busiCode" placeholder=""></el-input>
          </el-col>
        </el-col>
        <el-col :span="8" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="labelName">所属平台</label>
          </el-col>
          <el-col :span="14">
            <el-input clearable v-model="platform" placeholder=""></el-input>
          </el-col>
        </el-col>
      </el-row>

      <el-row class="mt10">
        <el-col :span="8" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="labelName">打印日期(开始)</label>
          </el-col>
          <el-col :span="14">
            <el-date-picker v-model="printTimeL" type="datetime"
                            placeholder="选择日期" >
            </el-date-picker>
          </el-col>
        </el-col>
        <el-col :span="8" class="common-box">
          <el-col :span="10" class="common-lab">
            <label class="labelName">打印日期(结束)</label>
          </el-col>
          <el-col :span="14">
            <el-date-picker v-model="printTimeR" type="datetime"
                            placeholder="选择日期" >
            </el-date-picker>
          </el-col>
        </el-col>
<!--        <el-col :span="16" class="common-box">-->
<!--          <el-col :span="4" class="common-lab">-->
<!--            <label class="labelName">打印日期</label>-->
<!--          </el-col>-->
<!--          <el-col :span="16">-->
<!--            <el-date-picker-->
<!--                    v-model="printTime"-->
<!--                    type="datetimerange"-->
<!--                    align="right"-->
<!--                    start-placeholder="开始日期"-->
<!--                    end-placeholder="结束日期"-->
<!--                    :default-time="['09:00:00', '23:59:59']">-->
<!--            </el-date-picker>-->
<!--          </el-col>-->
<!--        </el-col>-->
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="searchLogs"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </div>



    <div class="contain">
      <!-- 操作按钮 -->

      <div class="table_container">
        <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            header-cell-class-name="table-header-class"
            style="width:100%">
          <el-table-column property="platform" label="所属平台" min-width="100" ></el-table-column>
          <el-table-column property="busiMode" label="业务模块" min-width="150" ></el-table-column>
          <el-table-column property="busiCode" label="业务编号" min-width="150" ></el-table-column>
          <el-table-column property="printTime" label="打印时间" min-width="150" ></el-table-column>
          <el-table-column property="logDesc" label="日志" min-width="300" ></el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">

              <span class="operationIcon ml10" @click="showDetial(scope.row)">
                <!-- 查看 -->
                <el-tooltip class="item" effect="light" content="查看" placement="top">
                  <i class="el-icon-document"></i>
                </el-tooltip>
              </span>
<!--              <span class="operationIcon ml10" @click="downFile(scope.row)">-->
<!--                &lt;!&ndash; 下载 &ndash;&gt;-->
<!--                <el-tooltip class="item" effect="light" content="下载" placement="top">-->
<!--                  <i class="el-icon-download"></i>-->
<!--                </el-tooltip>-->
<!--              </span>-->
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="日志详情" :visible.sync="dialogFormVisible" width="60%" center>
      <el-row>
        <el-input v-model="logDesc"
                  type="textarea"
                  :rows="15"
                  disabled
        >
        </el-input>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import constant from '@/utils/constant';
  import appName from '@/api/appName';
  import uwLoadJs from '@/utils/uwLoad';
  import moment from 'moment';

  export default {
    data() {
      return {
        printTime:'',
        printTimeL:'',
        printTimeR:'',
        busiMode:'',
        busiCode:'',
        platform:'',
        logDesc:'',
        dialogFormVisible: false,
        loading: false,
        tableData: [],
        //需要给分页组件传的信息
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper",   // 翻页属性
          printTime: '',
        },
      }
    },
    created() {
		//移除打开后自动查询
      // this.showLogs();
    },
    mounted() {
    },
    methods: {
      resetSearch(){
        this.printTime='';
        this.busiMode='';
        this.busiCode='';
        this.platform='';
        this.printTimeL='';
        this.printTimeR='';
      },

      searchLogs(){
        this.paginations.pageSize=10;
        this.paginations.pageIndex=1;
        this.showLogs();
      },
      //查看日志
      showLogs(){
        let that = this;
        let time = "";


        let url = appName.SYSTEM+"/log/business/page?pageSize=" +this.paginations.pageSize+"&pageNumber="+this.paginations.pageIndex;
        if(this.busiCode!=""){
          url = url+"&busiCode="+this.busiCode;
        }
        if(this.busiMode!=""){
          url = url+"&busiMode="+this.busiMode;
        }
        if(this.platform!=""){
          url = url+"&platform="+this.platform;
        }
        // if(printTime){
        //   let begin = this.printTime[0];
        //   let end = this.printTime[1];
        //   time = "&printTimeL="+moment(begin).format('YYYY-MM-DD HH:mm:ss')+"&printTimeR="+moment(end).format('YYYY-MM-DD HH:mm:ss');
        //   url = url + time;
        // }

        if (this.printTimeL && this.printTimeR) {
          let oDate1 = new Date(this.printTimeL);
          let oDate2 = new Date(this.printTimeR);
          if (oDate1.getTime() > oDate2.getTime()) {
            this.$message.error("起始时间不能大于结束时间！");
            return;
          }
        }

        let begin = "";
        let end = "";
        if(this.printTimeL){
          url = url + "&printTimeL="+moment(this.printTimeL).format('YYYY-MM-DD HH:mm:ss');
          begin = moment(this.printTimeL).format('YYYY-MM-DD HH:mm:ss')
        }
        if(this.printTimeR){
          url = url + "&printTimeR="+moment(this.printTimeR).format('YYYY-MM-DD HH:mm:ss');
          end = moment(this.printTimeR).format('YYYY-MM-DD HH:mm:ss');
        }


        let url1 = appName.SYSTEM+"/log/business/pageList";
        let pramrs = {
          "printTimeL": begin,
          "printTimeR": end,
          "busiCode":this.busiCode,
          "busiMode":this.busiMode,
          "platform":this.platform,
          "pageSize":this.paginations.pageSize,
          "pageNumber":this.paginations.pageIndex,
        }
        that.loading= true;
        setTimeout(function(){
          let res = uwLoadJs.ajaxRequest(pramrs,url1);
          that.loading = false;
          debugger
          if (res.resultCode == constant.SUCCESS && res.data!=null) {
            if(res.data.rows.length==0){
              that.$message.error("无符合条件数据！");
            }
            that.tableData = res.data.rows;
            that.paginations.total = res.data.total
          }
          console.log(that.printTime);
        },100)

      },

      showDetial(data){
        // let that = this;
        // that.loading= true;
        // let params = {
        //   "id":data.id
        // }
        // setTimeout(function(){
        //   let url = appName.SYSTEM+"/log/business/get";
        //   let res = uwLoadJs.ajaxRequest(params,url);
        //   that.loading = false;
        //   debugger
        //   if (res.resultCode == constant.SUCCESS && res.data!=null) {
        //     that.logDesc = res.data.logDesc;
        //   }
        //   this.dialogFormVisible = true;
        // },100)
        this.logDesc = data.logDesc;
        this.dialogFormVisible = true;
      },

      downFile(data){
          let a = document.createElement('a')
          a.href =appName.SYSTEM+"/log/business/downLog?id="+data.id;
          a.click();
      },

      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageIndex = 1;
        this.paginations.pageSize = pageSize;
        this.showLogs();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.showLogs();
      },

    },
    computed: {},
  }
</script>
<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;

    .fastQuery {
      padding: 15px 20px 10px 20px;
      background: #fff;
      /*border-bottom: 1px solid #e1e1e1;*/

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;

    .svg-icon {
      font-size: 14px;
      fill: #68a3fc;
    }
  }
</style>
